<template>
  <div class="bookmark">
    <template v-for="item in markList"  >
      <div class="card" @click="navigateTo(item.url)" :key="item.url" v-if="item.url">
        <i class='iconfont' :class="item.icon || 'el-icon-star-off'"></i>
        <div>{{ item.label }}</div>
      </div>
    </template>
    <div class="card" @click="dialogVisible = true" key="add">
      <i class='iconfont el-icon-edit'></i>
    </div>
    <div class="card" @click="$emit('setting')" key="setting">
      <i class='iconfont el-icon-setting'></i>
    </div>
    
      <!-- 遍历列表进行排序及curd -->
    <el-dialog
      title="编辑书签"
      :visible.sync="dialogVisible"
      width="80%"
      :modal="false"
      class="mark-dialog"
    >
      <el-table
        :data="markList"
        style="width: 100%">
        <el-table-column
          prop="label"
          label="名称"
          width="100">
        </el-table-column>
        <el-table-column
          prop="url"
          label="网址"
          width="180">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="160">
          <template slot-scope="scope">
            <el-button @click="editMark( scope.row )" type="text" size="small">编辑</el-button>
            <template v-if="scope.row.url">
              <el-button @click="delMark( scope.$index )" type="text" size="small">删除</el-button>
              <el-button @click="move( scope.$index, 'up')" type="text" size="small">上移</el-button>
              <el-button @click="move( scope.$index )" type="text" size="small">下移</el-button>
            </template>
            <template v-if="markList.length <= 1">
              <el-button @click="remove" type="text" size="small">恢复默认</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
      
    </el-dialog>
      <!-- 添加书签 -->
    <el-dialog
      title="添加书签"
      :visible.sync="isEdit"
      width="80%"
      :modal="false"
      class="mark-dialog"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="网站名称:">
          <el-input v-model="form.label"></el-input>
        </el-form-item>
        <el-form-item label="网址:">
          <el-input v-model="form.url"></el-input>
        </el-form-item>
        <el-form-item label="图标:">
          <el-select v-model="form.icon" placeholder="请选择">
            <el-option
              v-for="item in icons"
              :key="item"
              :label="item"
              :value="item">
              <i :class="item" style="font-size: 36px;"></i>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelEdit">取 消</el-button>
        <el-button type="primary" @click="addMark">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { Dialog, Form, FormItem, Table, TableColumn } from 'element-ui'
import { ICONS } from '@/bookmark/'
export default {
  inject: ['markList'],
  components: {
    [ Form.name ]: Form,
    [ Table.name ]: Table,
    [ Dialog.name ]: Dialog,
    [ FormItem.name ]: FormItem,
    [ TableColumn.name ]: TableColumn,
  },
  data(){
    return {
      timer: null,
      dialogVisible: false,
      isEdit: false,
      icons: ICONS,
      form: {
        label: '',
        url: '',
        icon: ''
      }
    }
  },
  methods: {
    navigateTo( url ){
      clearTimeout( this.timer )
      this.timer = setTimeout(()=>{
        window.location.href = url
      },500)
    },
    editMark( row ){
      this.dialogVisible = false;
      this.isEdit = true;
      Object.assign( this.form, row )
    },
    cancelEdit(){
      this.dialogVisible = true;
      this.isEdit = false;
    },
    saveMark(){
      let markList = this.markList.filter( i => i.url )
      Cookies.set('B', JSON.stringify( markList ), { expires: 700 })
    },
    addMark(){
      this.isEdit = false;
      clearTimeout( this.timer )
      this.timer = setTimeout(()=>{
        if( !this.form.label && !this.form.url ) return;
        let item = this.markList.find( i => i.url === this.form.url )
        if( item ){
          Object.assign( item, this.form )
        }else{
          this.markList.splice( this.markList.length - 1, 0, this.form )
        }
        this.saveMark()
      },500)
      
    },
    delMark( index ){
      this.markList.splice( index, 1 )
      this.saveMark()
    },
    move( index, direction = 'down' ){
      let base = 0
      if( direction === 'up' ){
        base = index - 1
        if( base < 0 ) return;
      }else{
        base = index
        if( base >= this.markList.length - 1 ) return 
      }
      this.markList.splice( base, 2, this.markList[ base + 1 ], this.markList[ base ] )
      this.saveMark()
    },
    remove(){
      Cookies.set('B', '')
      this.$emit('reinit')
    }
  },
  destroyed(){
    clearTimeout( this.timer )
  }
}
</script>
<style lang="scss" scoped>
.bookmark{
  padding: 80px 0 0 20px;
  .el-icon-plus{
    font-size: 64px;
  }
}
.bookmark /deep/ .iconfont{
  font-size: 64px;
  margin-bottom: 10px;
}

.card{
  margin: 0 10px 10px 0;
  width: 100px;
  height: 120px;
  vertical-align: top;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.card:hover{
  border: 1px solid #ccc;
}
.mark-dialog /deep/ {
  .el-table{
    font-size: 20px;
  }
  .el-button--text{
    color: #000;
  }
  .el-select{
    width: 100%;
  }
  .el-table__row .cell{
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

</style>